var Game = function(canvas_id)
{
	   this.canvas_id = canvas_id;
	   
	   this.gameCanvas = document.getElementById(canvas_id);
       this.graphic =  this.gameCanvas.getContext('2d');
	   this.components = new Array();
       this.items = new Array();
       
       
       //---------Start : create star -------------
       
       
        
	   
	 
	   
	   
	   //---------Start : create star -------------
       
       
       
       //---------Start : change color for a skin----------
       
       //create new skin component
       this.componentSkin = new Component();
       
       //create new skin 1 item and set value for skin 1
       this.itemSkin1= new GameItem("img/skin/body_299x416_0x110.png");
       
       this.itemSkin1.name="skin1";
       this.itemSkin1.x = 0;
       this.itemSkin1.y=110;
       this.itemSkin1.width=299;
       this.itemSkin1.height=416;
       this.items.push(this.itemSkin1);
	   this.componentSkin.items.push(this.itemSkin1);
	   this.componentSkin.activeItem(this.itemSkin1);
	   //skin 2
       this.itemSkin2= new GameItem("img/skin/body_321x437_-8x100.png");
       
       this.itemSkin2.name="skin2";
       this.itemSkin2.x = 0;
       this.itemSkin2.y=110;
       this.itemSkin2.width=299;
       this.itemSkin2.height=416;
       this.items.push(this.itemSkin2);
	   this.componentSkin.items.push(this.itemSkin2);
	   
	   //skin 3
       this.itemSkin3= new GameItem("img/skin/body_321x439_-8x98.png");
       
       this.itemSkin3.name="skin3";
       this.itemSkin3.x = 0;
       this.itemSkin3.y=110;
       this.itemSkin3.width=299;
       this.itemSkin3.height=416;
       this.items.push(this.itemSkin3);
	   this.componentSkin.items.push(this.itemSkin3);
	   
	   //skin 4
       this.itemSkin4= new GameItem("img/skin/body_321x442_-8x98.png");
       
       this.itemSkin4.name="skin4";
       this.itemSkin4.x = 0;
       this.itemSkin4.y=110;
       this.itemSkin4.width=299;
       this.itemSkin4.height=416;
       this.items.push(this.itemSkin4);
	   this.componentSkin.items.push(this.itemSkin4);
       
	   //---------End : change color for a skin
	   
	   
	   
	   
	   //---------Start : change color for a cheek---------
       
	   
	   
	 //create new cheek component
	   this.componentCheek = new Component();
       
	   //check cheek for the each skin
	   
	   
       //create new cheek 1 item and set value for cheek 1
	   
	    //cheek11-108x129_100x142.png
       this.itemCheek1= new GameItem("img/cheek/cheek11.png");
       
       this.itemCheek1.name="cheek1";
       this.itemCheek1.x = 100;
       this.itemCheek1.y=142;
       this.itemCheek1.width=108;
       this.itemCheek1.height=129;
       this.items.push(this.itemCheekWhite);
	   this.componentCheek.items.push(this.itemCheek1);
	   
	   
	   
	   //pink cheek
	   this.imgSrcCheek2 = "";
	   
	   
	   
	   
	   this.itemCheek2= new GameItem("img/cheek/cheek12.png");
	 
       this.itemCheek2.name="cheek2";
       this.itemCheek2.x = 100;
       this.itemCheek2.y=142;
       this.itemCheek2.width=108;
       this.itemCheek2.height=129;
       this.items.push(this.itemCheek2);
	   this.componentCheek.items.push(this.itemCheek2);
	   
	   //orange cheek
	   
       this.itemCheek3= new GameItem("img/cheek/cheek13.png");
     
       this.itemCheek3.name="cheek3";
       this.itemCheek3.x = 100;
       this.itemCheek3.y=142;
       this.itemCheek3.width=108;
       this.itemCheek3.height=129;
       this.items.push(this.itemCheek3);
	   this.componentCheek.items.push(this.itemCheek3);
	   
	   //brown cheek
	   
	   
       this.itemCheek4 = new GameItem("img/cheek/cheek14.png");
     
       this.itemCheek4.name="cheek4";
       this.itemCheek4.x = 100;
       this.itemCheek4.y=142;
       this.itemCheek4.width=108;
       this.itemCheek4.height=129;
       this.items.push(this.itemCheek4);
	   this.componentCheek.items.push(this.itemCheek4);
	   this.componentCheek.activeItem(this.itemCheek1);
	   //---------End : change color for a cheek
	   
       
	   //---------Start : change color for a eyeliner------------
	   
	   //create new eyeliner component
       this.componentEyeliner = new Component();
       
       //create new eyeliner 1 item and set value for eyeliner 1
       this.itemEyeliner1= new GameItem("img/eyeliner/eyeliner1_94x22_114x287.png");
       
       this.itemEyeliner1.name="eyeliner";
       this.itemEyeliner1.x = 107;
       this.itemEyeliner1.y=194;
       this.itemEyeliner1.width=94;
       this.itemEyeliner1.height=22;
       this.items.push(this.itemEyeliner1);
	   this.componentEyeliner.items.push(this.itemEyeliner1);
	   
	 //create new eyeliner 2 item and set value for eyeliner 2
       this.itemEyeliner2= new GameItem("img/eyeliner/eyeliner2.png");
       
       this.itemEyeliner2.name="eyeliner";
       this.itemEyeliner2.x = 107;
       this.itemEyeliner2.y=194;
       this.itemEyeliner2.width=94;
       this.itemEyeliner2.height=22;
       this.items.push(this.itemEyeliner2);
	   this.componentEyeliner.items.push(this.itemEyeliner2);
	   
	   //create new eyeliner 2 item and set value for eyeliner 3
       this.itemEyeliner3= new GameItem("img/eyeliner/eyeliner3.png");
       
       this.itemEyeliner3.name="eyeliner";
       this.itemEyeliner3.x = 107;
       this.itemEyeliner3.y=194;
       this.itemEyeliner3.width=94;
       this.itemEyeliner3.height=22;
       this.items.push(this.itemEyeliner3);
	   this.componentEyeliner.items.push(this.itemEyeliner3);
	   
	   //create new eyeliner 4 item and set value for eyeliner 4
       this.itemEyeliner4= new GameItem("img/eyeliner/eyeliner4.png");
       
       this.itemEyeliner4.name="eyeliner";
       this.itemEyeliner4.x = 107;
       this.itemEyeliner4.y=194;
       this.itemEyeliner4.width=94;
       this.itemEyeliner4.height=22;
       this.items.push(this.itemEyeliner4);
	   this.componentEyeliner.items.push(this.itemEyeliner4);
	   
	   //create new eyeliner 5 item and set value for eyeliner 5
       this.itemEyeliner5= new GameItem("img/eyeliner/eyeliner5.png");
       
       this.itemEyeliner5.name="eyeliner";
       this.itemEyeliner5.x = 107;
       this.itemEyeliner5.y=194;
       this.itemEyeliner5.width=94;
       this.itemEyeliner5.height=22;
       this.items.push(this.itemEyeliner5);
	   this.componentEyeliner.items.push(this.itemEyeliner5);
	   
	   //create new eyeliner 6 item and set value for eyeliner 6
       this.itemEyeliner6= new GameItem("img/eyeliner/eyeliner6.png");
       
       this.itemEyeliner6.name="eyeliner";
       this.itemEyeliner6.x = 107;
       this.itemEyeliner6.y=194;
       this.itemEyeliner6.width=94;
       this.itemEyeliner6.height=22;
       this.items.push(this.itemEyeliner6);
	   this.componentEyeliner.items.push(this.itemEyeliner6);
	 
	   //create new eyeliner 7 item and set value for eyeliner 7
       this.itemEyeliner7= new GameItem("img/eyeliner/eyeliner7.png");
       
       this.itemEyeliner7.name="eyeliner";
       this.itemEyeliner7.x = 107;
       this.itemEyeliner7.y=194;
       this.itemEyeliner7.width=94;
       this.itemEyeliner7.height=22;
       this.items.push(this.itemEyeliner7);
	   this.componentEyeliner.items.push(this.itemEyeliner7);
	   
	   //---------End : change color for a eyeliner
	   
	   
       
       //---------Start : change color for a eyebrows----------
       
       this.componentEyeBrow = new Component();
       
       //itemEyeBrow 1
       this.itemEyeBrow1= new GameItem("img/eyebrow/eyebrow_101x10_102x193.png");
       
       this.itemEyeBrow1.name="eyebrow";
       this.itemEyeBrow1.x = 102;
       this.itemEyeBrow1.y=191;
       this.itemEyeBrow1.width=101;
       this.itemEyeBrow1.height=10;
       this.items.push(this.itemEyeBrow1);
	   this.componentEyeBrow.items.push(this.itemEyeBrow1);
	   
	   //itemEyeBrow 2
       this.itemEyeBrow2= new GameItem("img/eyebrow/eyebrow_103x12_101x192.png");
       
       this.itemEyeBrow2.name="eyebrow";
       this.itemEyeBrow2.x = 101;
       this.itemEyeBrow2.y=190;
       this.itemEyeBrow2.width=103;
       this.itemEyeBrow2.height=12;
       this.items.push(this.itemEyeBrow2);
	   this.componentEyeBrow.items.push(this.itemEyeBrow2);
	   
	   //itemEyeBrow 3
       this.itemEyeBrow3= new GameItem("img/eyebrow/eyebrow_92x12_107x193.png");
       
       this.itemEyeBrow3.name="eyebrow";
       this.itemEyeBrow3.x = 107;
       this.itemEyeBrow3.y=191;
       this.itemEyeBrow3.width=92;
       this.itemEyeBrow3.height=12;
       this.items.push(this.itemEyeBrow3);
	   this.componentEyeBrow.items.push(this.itemEyeBrow3);
	   
	   
	   //itemEyeBrow 4
	   this.itemEyeBrow4= new GameItem("img/eyebrow/eyebrow_98x12_104x193.png");
       
       this.itemEyeBrow4.name="eyebrow";
       this.itemEyeBrow4.x = 107;
       this.itemEyeBrow4.y=191;
       this.itemEyeBrow4.width=92;
       this.itemEyeBrow4.height=12;
       this.items.push(this.itemEyeBrow4);
	   this.componentEyeBrow.items.push(this.itemEyeBrow4);
 
	   
	   //itemEyeBrow 5
       this.itemEyeBrow5= new GameItem("img/eyebrow/eyebrow_99x12_103x191.png");
       
       this.itemEyeBrow5.name="eyebrow";
       this.itemEyeBrow5.x = 103;
       this.itemEyeBrow5.y=191;
       this.itemEyeBrow5.width=99;
       this.itemEyeBrow5.height=12;
       this.items.push(this.itemEyeBrow5);
	   this.componentEyeBrow.items.push(this.itemEyeBrow5);
 	   
	   //---------End : change color for a eyebrows
	   
	   
	   
	   //---------Start : change type for a eyelash
	   
	   this.componentEyeLash = new Component();
       
       //itemEyeLash 1
       this.itemEyeLash1= new GameItem("img/eyelash/beyelash_103x23_102x197.png");
       
       this.itemEyeLash1.name="eyelash";
       this.itemEyeLash1.x = 102;
       this.itemEyeLash1.y=196;
       this.itemEyeLash1.width=103;
       this.itemEyeLash1.height=23;
       this.items.push(this.itemEyeLash1);
	   this.componentEyeLash.items.push(this.itemEyeLash1);
	   
	   //itemEyeLash 2
       this.itemEyeLash2= new GameItem("img/eyelash/beyelash_112x18_97x119.png");
       
       this.itemEyeLash2.name="eyelash";
       this.itemEyeLash2.x = 99;
       this.itemEyeLash2.y=198;
       this.itemEyeLash2.width=110;
       this.itemEyeLash2.height=18;
       this.items.push(this.itemEyeLash2);
	   this.componentEyeLash.items.push(this.itemEyeLash2);
	   
	 //itemEyeLash 3
       this.itemEyeLash3= new GameItem("img/eyelash/beyelash_90x18_109x199.png");
       
       this.itemEyeLash3.name="eyelash";
       this.itemEyeLash3.x = 109;
       this.itemEyeLash3.y=198;
       this.itemEyeLash3.width=90;
       this.itemEyeLash3.height=18;
       this.items.push(this.itemEyeLash3);
	   this.componentEyeLash.items.push(this.itemEyeLash3);
	   
	   //itemEyeLash 4
       this.itemEyeLash4= new GameItem("img/eyelash/beyelash_92x18_107x200.png");
       
       this.itemEyeLash4.name="eyelash";
       this.itemEyeLash4.x = 107;
       this.itemEyeLash4.y=199;
       this.itemEyeLash4.width=92;
       this.itemEyeLash4.height=18;
       this.items.push(this.itemEyeLash4);
	   this.componentEyeLash.items.push(this.itemEyeLash4);
	   
	 //itemEyeLash 5
       this.itemEyeLash5= new GameItem("img/eyelash/beyelash_97x19_105x198.png");
       
       this.itemEyeLash5.name="eyelash";
       this.itemEyeLash5.x = 105;
       this.itemEyeLash5.y=197;
       this.itemEyeLash5.width=97;
       this.itemEyeLash5.height=19;
       this.items.push(this.itemEyeLash5);
	   this.componentEyeLash.items.push(this.itemEyeLash5);
	   
	   //---------End : change type for a eyelash
	   
	   
	   //---------Start : change color for a eyecolor----------
       
       //create new eyecolor component
       this.componentEyecolor = new Component();
       
       //create new eyecolor 1 item and set value for eyecolor 1
       this.itemEyecolor1= new GameItem("img/eyecolor/beye1_60x9_124x205.png");
       
       this.itemEyecolor1.name="eyecolor";
       this.itemEyecolor1.x = 124;
       this.itemEyecolor1.y=205;
       this.itemEyecolor1.width=60;
       this.itemEyecolor1.height=9;
       this.items.push(this.itemEyecolor1);
	   this.componentEyecolor.items.push(this.itemEyecolor1);
	   
	   //create new eyecolor 2 item and set value for eyecolor 2
       this.itemEyecolor2= new GameItem("img/eyecolor/beye2_64x11_121x205.png");
       
       this.itemEyecolor2.name="eyecolor";
       this.itemEyecolor2.x = 124;
       this.itemEyecolor2.y=205;
       this.itemEyecolor2.width=60;
       this.itemEyecolor2.height=9;
       this.items.push(this.itemEyecolor2);
	   this.componentEyecolor.items.push(this.itemEyecolor2);
	   
	 //create new eyecolor 3 item and set value for eyecolor 3
       this.itemEyecolor3= new GameItem("img/eyecolor/beye3_64x11_121x205.png");
       
       this.itemEyecolor3.name="eyecolor";
       this.itemEyecolor3.x = 124;
       this.itemEyecolor3.y=205;
       this.itemEyecolor3.width=60;
       this.itemEyecolor3.height=9;
       this.items.push(this.itemEyecolor3);
	   this.componentEyecolor.items.push(this.itemEyecolor3);
	   
	   
	   //create new eyecolor 4 item and set value for eyecolor 4
       this.itemEyecolor4= new GameItem("img/eyecolor/beye4_64x11_121x205.png");
       
       this.itemEyecolor4.name="eyecolor";
       this.itemEyecolor4.x = 124;
       this.itemEyecolor4.y=205;
       this.itemEyecolor4.width=60;
       this.itemEyecolor4.height=9;
       this.items.push(this.itemEyecolor4);
	   this.componentEyecolor.items.push(this.itemEyecolor4);
	   
	 //create new eyecolor 5 item and set value for eyecolor 5
       this.itemEyecolor5= new GameItem("img/eyecolor/beye5_64x11_121x205.png");
       
       this.itemEyecolor5.name="eyecolor";
       this.itemEyecolor5.x = 124;
       this.itemEyecolor5.y=205;
       this.itemEyecolor5.width=60;
       this.itemEyecolor5.height=9;
       this.items.push(this.itemEyecolor5);
	   this.componentEyecolor.items.push(this.itemEyecolor5);
	   
	 //create new eyecolor 6 item and set value for eyecolor 6
       this.itemEyecolor6= new GameItem("img/eyecolor/beye6_64x11_121x205.png");
       
       this.itemEyecolor6.name="eyecolor";
       this.itemEyecolor6.x = 124;
       this.itemEyecolor6.y=205;
       this.itemEyecolor6.width=60;
       this.itemEyecolor6.height=9;
       this.items.push(this.itemEyecolor6);
	   this.componentEyecolor.items.push( this.itemEyecolor6);
	   
	   
	 //create new eyecolor 7 item and set value for eyecolor 7
       this.itemEyecolor7= new GameItem("img/eyecolor/beye7_64x11_121x205.png");
       
       this.itemEyecolor7.name="eyecolor";
       this.itemEyecolor7.x = 124;
       this.itemEyecolor7.y=205;
       this.itemEyecolor7.width=60;
       this.itemEyecolor7.height=9;
       this.items.push(this.itemEyecolor7);
	   this.componentEyecolor.items.push(this.itemEyecolor7);
	   
	   //create new eyecolor 8 item and set value for eyecolor 8
       this.itemEyecolor8= new GameItem("img/eyecolor/beye8_64x11_121x205.png");
       
       this.itemEyecolor8.name="eyecolor";
       this.itemEyecolor8.x = 124;
       this.itemEyecolor8.y=205;
       this.itemEyecolor8.width=60;
       this.itemEyecolor8.height=9;
       this.items.push(this.itemEyecolor8);
	   this.componentEyecolor.items.push(this.itemEyecolor8);
	   
	   //---------End : change color for a eyecolor
	   
	   
	   
	   //---------Start : change color for a lip----------
       
       //create new lip component
       this.componentLip = new Component();
       
       //create new lip 1 item and set value for lip 1
       this.itemLip1= new GameItem("img/lip/blip1_42x16_133x252.png");
       
       this.itemLip1.name="lip";
       this.itemLip1.x = 133;
       this.itemLip1.y=252;
       this.itemLip1.width=42;
       this.itemLip1.height=16;
       this.items.push(this.itemLip1);
	   this.componentLip.items.push(this.itemLip1);
	   
	   //create new lip 2 item and set value for lip 2
       this.itemLip2= new GameItem("img/lip/blip2_43x17_132x254.png");
       
       this.itemLip2.name="lip";
       this.itemLip2.x = 133;
       this.itemLip2.y=252;
       this.itemLip2.width=42;
       this.itemLip2.height=16;
       this.items.push(this.itemLip2);
	   this.componentLip.items.push(this.itemLip2);
	   
	 //create new lip 3 item and set value for lip 3
       this.itemLip3= new GameItem("img/lip/blip3_43x17_132x254.png");
       
       this.itemLip3.name="lip";
       this.itemLip3.x = 133;
       this.itemLip3.y=252;
       this.itemLip3.width=42;
       this.itemLip3.height=16;
       this.items.push(this.itemLip3);
	   this.componentLip.items.push(this.itemLip3);
	   
	 //create new lip 4 item and set value for lip 4
       this.itemLip4= new GameItem("img/lip/blip4_43x17_132x254.png");
       
       this.itemLip4.name="lip";
       this.itemLip4.x = 133;
       this.itemLip4.y=252;
       this.itemLip4.width=42;
       this.itemLip4.height=16;
       this.items.push(this.itemLip4);
	   this.componentLip.items.push(this.itemLip4);
	   
	   //create new lip 5 item and set value for lip 5
       this.itemLip5= new GameItem("img/lip/blip5__43x17_132x254.png");
       
       this.itemLip5.name="lip";
       this.itemLip5.x = 133;
       this.itemLip5.y=252;
       this.itemLip5.width=42;
       this.itemLip5.height=16;
       this.items.push(this.itemLip5);
	   this.componentLip.items.push(this.itemLip5);
	   
	   //create new lip 6 item and set value for lip 6
       this.itemLip6= new GameItem("img/lip/blip6__43x17_132x254.png");
       
       this.itemLip6.name="lip";
       this.itemLip6.x = 133;
       this.itemLip6.y=252;
       this.itemLip6.width=42;
       this.itemLip6.height=16;
       this.items.push(this.itemLip6);
	   this.componentLip.items.push(this.itemLip6);
	   
	    
	   //---------End : change color for a lip
	   
	   
	   
	   //---------Start : change color for a clothes----------
       
       //create new clothes component
       this.componentClothes = new Component();
       
       //create new lip 1 item and set value for lip 1
       this.itemClothes1= new GameItem("img/clothes/dress_234x213_51x320.png");
       
       this.itemClothes1.name="clothes";
       this.itemClothes1.x = 51;
       this.itemClothes1.y=320;
       this.itemClothes1.width=234;
       this.itemClothes1.height=213;
       this.items.push(this.itemClothes1);
	   this.componentClothes.items.push(this.itemClothes1);
	   
	   //create new clothes 2 item and set value for clothes 2
       this.itemClothes2= new GameItem("img/clothes/dress_311x169_0x370.png");
       
       this.itemClothes2.name="clothes";
       this.itemClothes2.x = 0;
       this.itemClothes2.y=360;
       this.itemClothes2.width=311;
       this.itemClothes2.height=169;
       this.items.push(this.itemClothes2);
	   this.componentClothes.items.push(this.itemClothes2);
	   
	   //create new clothes 3 item and set value for clothes 3
       this.itemClothes3= new GameItem("img/clothes/dress_320x242_-13x296.png");
       
       this.itemClothes3.name="clothes";
       this.itemClothes3.x = - 8;
       this.itemClothes3.y=290;
       this.itemClothes3.width=311;
       this.itemClothes3.height=242;
       this.items.push(this.itemClothes3);
	   this.componentClothes.items.push(this.itemClothes3);
	   
	   //create new lip 4 item and set value for lip 4
       this.itemClothes4= new GameItem("img/clothes/dress_324x222_-15x318.png");
       
       this.itemClothes4.name="clothes";
       this.itemClothes4.x = -7;
       this.itemClothes4.y=314;
       this.itemClothes4.width=311;
       this.itemClothes4.height=222;
       this.items.push(this.itemClothes4);
	   this.componentClothes.items.push(this.itemClothes4);
	   
	   //create new lip 5 item and set value for lip 5
       this.itemClothes5= new GameItem("img/clothes/dress_335x201_-14x339.png");
       
       this.itemClothes5.name="clothes";
       this.itemClothes5.x = -14;
       this.itemClothes5.y=335;
       this.itemClothes5.width=335;
       this.itemClothes5.height=201;
       this.items.push(this.itemClothes5);
	   this.componentClothes.items.push(this.itemClothes5);
	   
	   //---------End : change color for a clothes
	   
	   
	   
	   
       //---------Start : change type for a hair------------
       this.componentHair = new Component();
       
       //hair 1
       this.itemHair1= new GameItem("img/hair/hair_165x192_71x66.png");
       
       this.itemHair1.name="hair";
       this.itemHair1.x = 71;
       this.itemHair1.y=66;
       this.itemHair1.width=165;
       this.itemHair1.height=192;
       this.items.push(this.itemHair1);
	   this.componentHair.items.push(this.itemHair1);
	   
	   //hair 2
       this.itemHair2= new GameItem("img/hair/hair_167x229_73x80.png");
       
       this.itemHair2.name="hair";
       this.itemHair2.x = 73;
       this.itemHair2.y=80;
       this.itemHair2.width=167;
       this.itemHair2.height=229;
       this.items.push(this.itemHair2);
	   this.componentHair.items.push(this.itemHair2);
	   
	   //hair 3
       this.itemHair3= new GameItem("img/hair/hair_215x289_39x94.png");
       
       this.itemHair3.name="hair";
       this.itemHair3.x = 43;
       this.itemHair3.y=94;
       this.itemHair3.width=210;
       this.itemHair3.height=289;
       this.items.push(this.itemHair3);
	   this.componentHair.items.push(this.itemHair3);
	   
	   //hair 4
       this.itemHair4= new GameItem("img/hair/hair_245x314_25x78.png");
       
       this.itemHair4.name="hair";
       this.itemHair4.x = 30;
       this.itemHair4.y=75;
       this.itemHair4.width=235;
       this.itemHair4.height=314;
       this.items.push(this.itemHair4);
	   this.componentHair.items.push(this.itemHair4);
	   
	   //hair 5
       this.itemHair5= new GameItem("img/hair/hair_272x381_18x79.png");
       
       this.itemHair5.name="hair";
       this.itemHair5.x = 28;
       this.itemHair5.y=79;
       this.itemHair5.width=254;
       this.itemHair5.height=381;
       this.items.push(this.itemHair5);
	   this.componentHair.items.push(this.itemHair5);
     
       //---------End : change type for a hair
       
       
	   //---------Start : change type for a necklace------------
       this.componentNecklace = new Component();
       
       //necklace 1
       this.itemNecklace1= new GameItem("img/necklace/lines_107x98_97x313.png");
       
       this.itemNecklace1.name="necklace";
       this.itemNecklace1.x = 100;
       this.itemNecklace1.y=308;
       this.itemNecklace1.width=107;
       this.itemNecklace1.height=98;
       this.items.push(this.itemNecklace1);
	   this.componentNecklace.items.push(this.itemNecklace1);
	   
	   //necklace 2
       this.itemNecklace2= new GameItem("img/necklace/lines_131x49_87x318.png");
       
       this.itemNecklace2.name="necklace";
       this.itemNecklace2.x = 81;
       this.itemNecklace2.y=310;
       this.itemNecklace2.width=131;
       this.itemNecklace2.height=49;
       this.items.push(this.itemNecklace2);
	   this.componentNecklace.items.push(this.itemNecklace2);
	   
	   //necklace 3
       this.itemNecklace3= new GameItem("img/necklace/lines_86x143_108x311.png");
       
       this.itemNecklace3.name="necklace";
       this.itemNecklace3.x = 106;
       this.itemNecklace3.y=309;
       this.itemNecklace3.width=86;
       this.itemNecklace3.height=143;
       this.items.push(this.itemNecklace3);
	   this.componentNecklace.items.push(this.itemNecklace3);
	   
	   //necklace 4
       this.itemNecklace4= new GameItem("img/necklace/lines_87x78_107x311.png");
       
       this.itemNecklace4.name="necklace";
       this.itemNecklace4.x = 111;
       this.itemNecklace4.y=300;
       this.itemNecklace4.width=87;
       this.itemNecklace4.height=78;
       this.items.push(this.itemNecklace4);
	   this.componentNecklace.items.push(this.itemNecklace4);
	   
	   //necklace 5
       this.itemNecklace5= new GameItem("img/necklace/lines_97x45_103x309.png");
       
       this.itemNecklace5.name="necklace";
       this.itemNecklace5.x = 105;
       this.itemNecklace5.y=305;
       this.itemNecklace5.width=97;
       this.itemNecklace5.height=45;
       this.items.push(this.itemNecklace5);
	   this.componentNecklace.items.push(this.itemNecklace5);
	   
	 	//---------End : change type for a necklace
	   
	   //---------Start : change type for a earring------------
       this.componentEarring = new Component();
       
       //earring 1
       this.itemEarring1= new GameItem("img/earring/earring_120x31_94x230.png");
       
       this.itemEarring1.name="earring";
       this.itemEarring1.x = 96;
       this.itemEarring1.y=237;
       this.itemEarring1.width=116;
       this.itemEarring1.height=31;
       this.items.push(this.itemEarring1);
	   this.componentEarring.items.push(this.itemEarring1);
	   
	   //earring 2
       this.itemEarring2= new GameItem("img/earring/earring_121x40_93x233.png");
       
       this.itemEarring2.name="earring";
       this.itemEarring2.x = 93;
       this.itemEarring2.y=233;
       this.itemEarring2.width=121;
       this.itemEarring2.height=40;
       this.items.push(this.itemEarring2);
	   this.componentEarring.items.push(this.itemEarring2);
	   
	   //earring 3
       this.itemEarring3= new GameItem("img/earring/earring_124x46_91x234.png");
       
       this.itemEarring3.name="earring";
       this.itemEarring3.x = 91;
       this.itemEarring3.y=234;
       this.itemEarring3.width=124;
       this.itemEarring3.height=46;
       this.items.push(this.itemEarring3);
	   this.componentEarring.items.push(this.itemEarring3);
	   
	   //earring 4
       this.itemEarring4= new GameItem("img/earring/earring_127x49_89x238.png");
       
       this.itemEarring4.name="earring";
       this.itemEarring4.x = 89;
       this.itemEarring4.y=238;
       this.itemEarring4.width=127;
       this.itemEarring4.height=49;
       this.items.push(this.itemEarring4);
	   this.componentEarring.items.push(this.itemEarring4);
	   
	   //earring 5
       this.itemEarring5= new GameItem("img/earring/earring_128x15_89x235.png");
       
       this.itemEarring5.name="earring";
       this.itemEarring5.x = 91;
       this.itemEarring5.y=233;
       this.itemEarring5.width=123;
       this.itemEarring5.height=15;
       this.items.push(this.itemEarring5);
	   this.componentEarring.items.push(this.itemEarring5);
	   
	   //---------End : change type for a earring
	   
	   
	   //---------Start : change type for a hat------------
       this.componentHat = new Component();
       
       //hat 1
       this.itemHat1= new GameItem("img/hat/bhat1_379x268_-23x0.png");
       
       this.itemHat1.name="hat";
       this.itemHat1.x = -23;
       this.itemHat1.y=0;
       this.itemHat1.width=374;
       this.itemHat1.height=268;
       this.items.push(this.itemHat1);
	   this.componentHat.items.push(this.itemHat1);
	   
	   //hat 2
       this.itemHat2= new GameItem("img/hat/bhat2_207x199_38x24.png");
	   
	   
       this.itemHat2.name="hat";
       this.itemHat2.x = 38;
       this.itemHat2.y=24;
       this.itemHat2.width=207;
       this.itemHat2.height=199;
       this.items.push(this.itemHat2);
	   this.componentHat.items.push(this.itemHat2);
	   
	   //hat 3
       this.itemHat3= new GameItem("img/hat/bhat3_203x216_23x26.png");
       
       this.itemHat3.name="hat";
       this.itemHat3.x = 23;
       this.itemHat3.y=26;
       this.itemHat3.width=203;
       this.itemHat3.height=216;
       this.items.push(this.itemHat3);
	   this.componentHat.items.push(this.itemHat3);
	   
	   //hat 4
       this.itemHat4= new GameItem("img/hat/bhat4_279x231_-9x39.png");
       
       this.itemHat4.name="hat";
       this.itemHat4.x = -9;
       this.itemHat4.y=39;
       this.itemHat4.width=279;
       this.itemHat4.height=231;
       this.items.push(this.itemHat4);
	   this.componentHat.items.push(this.itemHat4);
	   
	   //hat 5
       this.itemHat5= new GameItem("img/hat/bhat5_278x275_4x19.png");
       
       this.itemHat5.name="hat";
       this.itemHat5.x = 4;
       this.itemHat5.y=19;
       this.itemHat5.width=278;
       this.itemHat5.height=275;
       this.items.push(this.itemHat5);
	   this.componentHat.items.push(this.itemHat5);
	   
	   //hat 6
       this.itemHat6= new GameItem("img/hat/bhat6_209x211_42x26.png");
       
       this.itemHat6.name="hat";
       this.itemHat6.x = 42;
       this.itemHat6.y=26;
       this.itemHat6.width=209;
       this.itemHat6.height=211;
       this.items.push(this.itemHat6);
	   this.componentHat.items.push(this.itemHat6);
	   
	   //hat 7
       this.itemHat7= new GameItem("img/hat/bhat7_210x234_63x3.png");
       
       this.itemHat7.name="hat";
       this.itemHat7.x = 63;
       this.itemHat7.y=3;
       this.itemHat7.width=210;
       this.itemHat7.height=234;
       this.items.push(this.itemHat7);
	   this.componentHat.items.push(this.itemHat7);
	   
	   //hat 8
       this.itemHat8= new GameItem("img/hat/bhat8_347x242_7x26.png");
       
       this.itemHat8.name="hat";
       this.itemHat8.x = 7;
       this.itemHat8.y=26;
       this.itemHat8.width=347;
       this.itemHat8.height=242;
       this.items.push(this.itemHat8);
	   this.componentHat.items.push(this.itemHat8);
	   
	   //hat 9
       this.itemHat9= new GameItem("img/hat/bhat9_207x262_15x17.png");
       
       this.itemHat9.name="hat";
       this.itemHat9.x = 15;
       this.itemHat9.y=17;
       this.itemHat9.width=207;
       this.itemHat9.height=262;
       this.items.push(this.itemHat9);
	   this.componentHat.items.push(this.itemHat9);
	   
	   //hat 10
       this.itemHat10= new GameItem("img/hat/bhat10_278x229_63x15.png");
       
       this.itemHat10.name="hat";
       this.itemHat10.x = 63;
       this.itemHat10.y=15;
       this.itemHat10.width=278;
       this.itemHat10.height=229;
       this.items.push(this.itemHat10);
	   this.componentHat.items.push(this.itemHat10);
	   
	   //hat 11
       this.itemHat11= new GameItem("img/hat/bhat11_324x188_-9x4.png");
       
       this.itemHat11.name="hat";
       this.itemHat11.x = -9;
       this.itemHat11.y=4;
       this.itemHat11.width=324;
       this.itemHat11.height=188;
       this.items.push(this.itemHat11);
	   this.componentHat.items.push(this.itemHat11);
	   
	   //hat 12
       this.itemHat12= new GameItem("img/hat/bhat12_269x235_47x15.png");
       
       this.itemHat12.name="hat";
       this.itemHat12.x = 47;
       this.itemHat12.y=15;
       this.itemHat12.width=269;
       this.itemHat12.height=235;
       this.items.push(this.itemHat12);
	   this.componentHat.items.push(this.itemHat12);
	   
	   //hat 13
       this.itemHat13= new GameItem("img/hat/bhat13_201x173_22x24.png");
       
       this.itemHat13.name="hat";
       this.itemHat13.x = 22;
       this.itemHat13.y=24;
       this.itemHat13.width=201;
       this.itemHat13.height=173;
       this.items.push(this.itemHat13);
	   this.componentHat.items.push(this.itemHat13);
	   
	   //---------End : change type for a hat
	   
	   //-------Add componentItem to component Array---------
	   
	   
	   this.componentBrush = new Component();

		// create new brush item 
		this.itemEyebrowBrush = new Items("img/util/choilongmay.png");
	
		this.itemEyebrowBrush.name = "skin";
		this.itemEyebrowBrush.x = 119;
		this.itemEyebrowBrush.y = 240;
		this.itemEyebrowBrush.width = 20;
		this.itemEyebrowBrush.height = 48;
		this.items.push(this.itemEyebrowBrush);
		this.componentBrush.items.push(this.itemEyebrowBrush);
	   
		
		// create new fireworks item 
		this.itemFireworks = new Items("img/util/fire.png");
	
		this.itemFireworks.name = "fireworks";
		this.itemFireworks.x = 150;
		this.itemFireworks.y = 440;
		this.itemFireworks.width = 214;
		this.itemFireworks.height = 182;
		this.items.push(this.itemFireworks);
		this.componentBrush.items.push(this.itemFireworks);
		
		// create new brush item 
		this.itemCheekBrush = new Items("img/util/choima.png");
	
		this.itemCheekBrush.name = "skin";
		this.itemCheekBrush.x = 119;
		this.itemCheekBrush.y = 270;
		this.itemCheekBrush.width = 20;
		this.itemCheekBrush.height = 48;
		this.items.push(this.itemCheekBrush);
		this.componentBrush.items.push(this.itemCheekBrush);
		
		this.componentDust = new Component();

		// create new brush item 
		this.itemEyebrowBrush2 = new Items("img/util/choimi.png");
	
		this.itemEyebrowBrush2.name = "skin";
		this.itemEyebrowBrush2.x = 119;
		this.itemEyebrowBrush2.y = 240;
		this.itemEyebrowBrush2.width = 20;
		this.itemEyebrowBrush2.height = 48;
		this.items.push(this.itemEyebrowBrush2);
		this.componentBrush.items.push(this.itemEyebrowBrush2);
		
		// create new brush item 
		this.itemEyelashBrush = new Items("img/util/eyelash.png");
	
		this.itemEyelashBrush.name = "skin";
		this.itemEyelashBrush.x = 119;
		this.itemEyelashBrush.y = 280;
		this.itemEyelashBrush.width = 17;
		this.itemEyelashBrush.height = 85;
		this.items.push(this.itemEyelashBrush);
		this.componentBrush.items.push(this.itemEyelashBrush);
		
		// create new brush item 
		this.itemLip = new Items("img/util/lip.png");
	
		this.itemLip.name = "lip";
		this.itemLip.x = 145;
		this.itemLip.y = 290;
		this.itemLip.width = 10;
		this.itemLip.height = 35;
		this.items.push(this.itemLip);
		this.componentBrush.items.push(this.itemLip);
		
		this.componentDust = new Component();
		
		// create new dust 1 item 
		this.itemDust1 = new Items("img/util/bui1.png");
	
		this.itemDust1.name = "dust1";
		this.itemDust1.x = 119;
		this.itemDust1.y = 240;
		this.itemDust1.width = 60;
		this.itemDust1.height = 60;
		this.items.push(this.itemDust1);
		this.componentDust.items.push(this.itemDust1);
	   
		// create new dust 1 item 
		this.itemDust2 = new Items("img/util/bui2.png");
	
		this.itemDust2.name = "dust2";
		this.itemDust2.x = 119;
		this.itemDust2.y = 240;
		this.itemDust2.width = 60;
		this.itemDust2.height = 60;
		this.items.push(this.itemDust2);
		this.componentDust.items.push(this.itemDust2);
		
		// create new dust 1 item
		this.itemDust3 = new Items("img/util/bui3.png");
	
		this.itemDust3.name = "dust3";
		this.itemDust3.x = 125;
		this.itemDust3.y = 233;
		this.itemDust3.width = 60;
		this.itemDust3.height = 60;
		this.items.push(this.itemDust3);
		this.componentDust.items.push(this.itemDust3);
		
		// create new dust 1 item
		this.itemDust4 = new Items("img/util/bui4.png");
	
		this.itemDust4.name = "dust4";
		this.itemDust4.x = 119;
		this.itemDust4.y = 240;
		this.itemDust4.width = 60;
		this.itemDust4.height = 60;
		this.items.push(this.itemDust4);
		this.componentDust.items.push(this.itemDust4);
		
		// create new dust 1 item
		this.itemDust5 = new Items("img/util/bui5.png");
	
		this.itemDust5.name = "dust1";
		this.itemDust5.x = 119;
		this.itemDust5.y = 240;
		this.itemDust5.width = 60;
		this.itemDust5.height = 60;
		this.items.push(this.itemDust5);
		this.componentDust.items.push(this.itemDust5);
		
		//create new skin component
       this.componentStar = new Component();
       
       this.itemStars = new Array();
       this.xs = new Array(72,156,239,32,112,226,136,226,55,176);
       this.ys = new Array(140,167,151,234,226,219,303,303,354,361);
       for(var i =0;i<10;i++)
	   {
    	   this.itemStars[i]= new GameItem("img/util/star.png");
           
           this.itemStars[i].name="star";
           this.itemStars[i].x = this.xs[i];
           this.itemStars[i].y=this.ys[i];
           this.itemStars[i].width=50;
           this.itemStars[i].height=50;
           this.items.push(this.itemStars[i]);
    	   this.componentStar.items.push(this.itemStars[i]);
    	   
	   }
		
		
	   //add skin component to components 
	   this.components.push(this.componentSkin);
	   //add star component to components 
	   this.components.push(this.componentStar);
	   //add cheek component to components 
	   this.components.push(this.componentCheek);
	   //add eyebrow component to eyeliner
	   this.components.push(this.componentEyeliner);
	   //add eyebrow component to components 
	   this.components.push(this.componentEyeBrow);
	   //add eyelash component to components 
	   this.components.push(this.componentEyeLash);
	   //add eyecolor component to components 
	   this.components.push(this.componentEyecolor);
	   //add lip component to components 
 	   this.components.push(this.componentLip);
	   //add clothes component to components 
	   this.components.push(this.componentClothes);
	   //add necklace component to components 
	   this.components.push(this.componentNecklace);
	   //add hair component to components 
	   this.components.push(this.componentHair);
	   //add earring component to components 
	   this.components.push(this.componentEarring);
	   //add hat component to components 
	   this.components.push(this.componentHat);
	   //bui phan
	   this.components.push(this.componentDust);
	   //choi long may
	   this.components.push(this.componentBrush);
	   //add star component to components 
	   this.components.push(this.componentStar);
     
       
       
       
       //draw background
       this.image = new Image();
       this.image.src = "img/model_ground.png";
       
       
       
       //draw 
       this.cachedCanvas=document.createElement('canvas');
       this.cachedCanvas.width=this.gameCanvas.width;
       this.cachedCanvas.height=this.gameCanvas.height;
       this.cachedGraphic=this.cachedCanvas.getContext('2d');
       this.draw = function()
       {
           this.graphic.clearRect(0,0,this.gameCanvas.width, this.gameCanvas.height);
             
           this.cachedGraphic.drawImage(this.image, 0,0);
           
           for(var i=0;i<this.components.length;i++)
    	   {
        	   this.components[i].draw(this.cachedGraphic);
    	   }
           this.graphic.drawImage(this.cachedGraphic.canvas, 0,0);
           
       };
       this.update = function()
       {
    	var tmpItem = this.componentSkin.getActiveItem();
	   	var skinNo = tmpItem.name.replace("skin", "");
	   	tmpItem=this.componentCheek.getActiveItem();
	   	var cheekNo = tmpItem.name.replace("cheek", ""); //cheek+skinno+cheekNo.png
	   	tmpItem.image.src="img/cheek/cheek"+skinNo+""+cheekNo+".png";
	   	this.draw();
       }
        
       
 
};
